<template>
  <div class="w-full h-full overflow-hidden">
    <div class="fixed top-10 left-10 z-10 flex gap-x-4 w-full">
      <button @click="play">播放</button>
      <button @click="pause">暂停</button>
      <div class="flex-1">
        <v-slider v-model="currentTime" :min="0" :max="audio.duration" :step="0.1" class="w-full" />
      </div>
    </div>

    <div class="w-full h-[320px] mt-[120px]">
      <!-- :ass-lyric="assText" -->
      <Karaoke
        :ass-lyric="assText"
        :lrc-lyric="lrcLyric"
        :current-time="currentTime"
        :font-size="18"
        :active-font-size="22"
        highlight-color="#facc15"
      >
      </Karaoke>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { assText, lrcLyric } from "./moke-date.js";
import Karaoke from "@/package/ass-parse/components/karoke/index.vue";
const url = "https://oss.top237.top/assets/0124440b6ba183293f74fbbf6bd0dce1.mp3";
const currentTime = ref(0);
const audio = new Audio(url);
onMounted(() => {
  audio.onload = () => {
    console.log("音频加载完成");
  };
  audio.addEventListener("timeupdate", () => {
    currentTime.value = audio.currentTime;
  });
});
function play() {
  audio.play();
}

function pause() {
  audio.pause();
}
</script>
